import QtQuick 2.0

Flipable {
    id: flipable
    width: 400
    height: 600

    x: root.width/2
    y: (root.height-height)/2

    property bool flipped: false
    property Item itemFront
    property Item itemBack
    property real myAngle: -180
    property int num: 0

    front: itemFront
    back: itemBack

    transform: Rotation{
        id: rotation
        axis.x : 0
        axis.y : 1
        axis.z : 0
        angle: 0

        origin.x : 0
        origin.y :  flipable.height/2

        onAngleChanged: {
//            if(angle == 0 || angle == myAngle)
//            {
//                if(flipable.flipped) flipable.z = step
//                else{
//                    flipable.z = max-step
//                }
//            }

            if(angle < 0 && angle > -90)
            {
                if(!flipable.flipped){
                    flipable.z = max-step
                }
            }

//            if(angle == 0 || angle == myAngle){
//                isMouseEnable = true
//            }
//            else{
//                isMouseEnable = false
//            }
        }
    }

    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: myAngle }
        when: flipable.flipped
    }

    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
    }
    Timer{
        id: timer
        interval: 1000
        onTriggered: {
            isMouseEnable = true
        }
    }

    MouseArea{
        anchors.fill: parent
        enabled: isMouseEnable
        onClicked: {
            isMouseEnable = false
            timer.restart()
            flipable.flipped = !flipable.flipped
            if(flipable.flipped)
            {
                step++
                flipable.z = step + 20
            }
            else{
                step--
            }
            console.log("p ", num,  "z: ", flipable.z)
        }
    }
}
